﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "工序设置";
    Layout = null;
}

<link href="~/layui/css/layui.css" rel="stylesheet" />

<script src="~/layui/layui.js"></script>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" id="procedureCode" class="layui-input" placeholder="请输入工序编码">
                    </div>
                    <div class="layui-inline">
                        <input type="text" id="procedureName" class="layui-input" placeholder="请输入工序名称">
                    </div>
                    <div class="layui-inline">
                        <select id="isNo" class="layui-select">
                            <option :value="3">是否启用</option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button id="searchBtn" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                        <button id="resetBtn" class="layui-btn layui-btn-primary icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                        <button id="addBtn" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                    </div>
                </div>
            </div>
            
            <table id="processTable" lay-filter="processTable"></table>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<!-- 编辑弹窗模板 -->
<script type="text/html" id="editFormTpl">
    <div class="layui-form" lay-filter="editForm" style="padding: 20px;">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">工序编码</label>
            <div class="layui-input-inline" style="width: 280px;">
                <input type="text" id="procedureCodeInput" name="procedureCode" placeholder="请输入工序编码" class="layui-input" lay-verify="required">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="checkbox" name="autoGenerate" lay-skin="switch" lay-text="自动|手动" lay-filter="autoGenerateCode">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工序名称</label>
            <div class="layui-input-block">
                <input type="text" name="procedureName" placeholder="请输入工序名称" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isNo" value="1" title="是" checked>
                <input type="radio" name="isNo" value="0" title="否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="context" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
</script>

<script>
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 表格实例
            table.render({
                elem: '#processTable',
                url: '/ProcessConfiguration/GetProcessList',
                method: 'get',
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                cols: [[ // 表头
                    {type: 'checkbox'},
                    {field: 'procedureCode', title: '工序编码', width: 120},
                    {field: 'procedureName', title: '工序名称', width: 150},
                    {field: 'isNo', title: '是否启用', width: 100, templet: function(d){
                        return d.isNo == 1 ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge layui-bg-gray">否</span>';
                    }},
                    {field: 'context', title: '备注'},
                    {title: '操作', width: 160, toolbar: '#operationTpl', fixed: 'right'}
                ]],
                limits: [10, 20, 30, 50],
                limit: 10
            });

            // 监听搜索
            form.on('submit(search)', function(data){
                table.reload('processTable', {
                    where: {
                        procedureCode: data.field.procedureCode,
                        procedureName: data.field.procedureName,
                        isNo: data.field.isNo
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
        
        // 监听工具条点击
        table.on('tool(processTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit') {
                // 编辑操作
                layer.open({
                    type: 1,
                    title: '编辑工序',
                    area: ['550px', '500px'],
                    content: $('#editFormTpl').html(),
                    success: function() {
                        form.val('editForm', data);
                        form.render();
                    },
                    btn: ['保存', '取消'],
                    yes: function() {
                        // 保存编辑
                        var formData = form.val('editForm');
                        $.ajax({
                            url: '/ProcessConfiguration/UpdateProcessConfiguration',
                            type: 'POST',
                            data: formData,
                            success: function(res) {
                                    layer.msg('保存成功', {icon: 1});
                                    table.reload('processTable');
                                    layer.closeAll('page');
                            },
                            error: function() {
                                layer.msg('网络错误，请稍后重试', {icon: 2});
                            }
                        });
                    }
                });
            } else if(obj.event === 'del') {
                // 删除操作
                layer.confirm('确定要删除该工序吗？删除后数据将无法恢复！', {
                    icon: 3, 
                    title: '删除确认',
                    btn: ['确定删除', '取消操作']
                }, function(index){
                    $.ajax({
                        url: '/ProcessConfiguration/DeleteProcessConfiguration',
                        type: 'POST',
                        data: {id: data.id},
                        success: function(res) {
                            layer.msg('删除成功', {icon: 1});
                            table.reload('processTable');
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        // 新增按钮点击
        $('#addBtn').click(function() {
            layer.open({
                type: 1,
                title: '新增工序',
                area: ['550px', '500px'],
                content: $('#editFormTpl').html(),
                success: function() {
                    // 清空表单
                    form.val('editForm', {
                        procedureCode: '',
                        procedureName: '',
                        isNo: 1,
                        context: ''
                    });
                    form.render();
                    
                    // 监听自动生成编码开关
                    form.on('switch(autoGenerateCode)', function(data){
                        if(data.elem.checked) {
                            // 先立即生成临时编码
                            var tempCode = 'P' + new Date().getTime().toString().slice(-6);
                            $('#procedureCodeInput').val(tempCode);
                            $('#procedureCodeInput').prop('readonly', true);
                            
                            // 尝试从后端获取正式编码
                            $.ajax({
                                url: '/ProcessConfiguration/GetNextCode',
                                type: 'GET',
                                success: function(res) {
                                    if(res && res.code) {
                                        $('#procedureCodeInput').val(res.code);
                                    }
                                }
                            });
                        } else {
                            // 手动输入
                            $('#procedureCodeInput').val('');
                            $('#procedureCodeInput').prop('readonly', false);
                        }
                    });
                },
                btn: ['保存', '取消'],
                yes: function() {
                    // 保存新增
                    var formData = form.val('editForm');
                    // 确保表单数据完整
                    if(!formData.procedureCode || !formData.procedureName) {
                        layer.msg('请填写必填项', {icon: 2});
                        return;
                    }
                    
                    $.ajax({
                        url: '/ProcessConfiguration/AddProcessConfiguration',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData),
                        success: function(res) {
                            layer.msg('添加成功', {icon: 1});
                            table.reload('processTable');
                            layer.closeAll('page');
                            // 添加页面刷新
                            setTimeout(function() {
                                window.location.reload();
                            }, 800); // 延迟800毫秒后刷新页面，让用户先看到成功提示
                        },
                        error: function(xhr, status, error) {
                            console.log('错误信息:', xhr.responseText);
                            layer.msg('网络错误，状态码：' + xhr.status + '，请稍后重试', {icon: 2});
                        }
                    });
                }
            });
        });
        
        // 搜索按钮点击
        $('#searchBtn').click(function() {
            table.reload('processTable', {
                where: {
                    procedureCode: $('#procedureCode').val(),
                    procedureName: $('#procedureName').val(),
                    isNo: $('#isNo').val()
                },
                page: {
                    curr: 1
                }
            });
        });

        // 重置按钮点击
        $('#resetBtn').click(function() {
            // 清空所有查询条件
            $('#procedureCode').val('');
            $('#procedureName').val('');
            $('#isNo').val(3);
            
            // 重新加载表格
            table.reload('processTable', {
                where: {
                    procedureCode: '',
                    procedureName: '',
                    isNo: 3
                },
                page: {
                    curr: 1
                }
            });
        });
    });
</script>


